<template>
	
	<form @submit="submit" :data-action="`/api/sampleRecord/save?stationId=${param.id}`">
		
			<switchTabber :list="['质控','校准','质控与校准']" :index="curIndex" @change="curIndex=$event.index"></switchTabber>
			<view class="pd5 grayBg"></view>
			
			<block v-if="curIndex!=1">
				<view class="pd10 main bb">
					标液核查
				</view>
				
				<view class="father">
					<view class="fixAuto bb middle ">
						<view class="w100">
							项目名称
						</view>
						<view class="text-right">
							{{factorList[factorIndex]}}
							<text class="ml5 sIcon-arrowRight grey"></text>
						</view>
					</view>
					<picker class="op0 abs" mode="selector" :range="factorList" :value="factorIndex" @change="changeFactor">
						<view class="op0 abs">{{factor}}</view>
					</picker>
				</view>
				<view class="fixAuto bb middle" v-show="isOtherFator">
					<view class="w100">
						其他项目名称
					</view>
					<view>
						<input type="text" name="x.projectName|项目名称|0~50"  v-model="factor" placeholder="请输入项目名称">
					</view>
				</view>
				
				
				<view class="fixAuto bb middle">
					<view class="w100">
						单位
					</view>
					<view>
						<input type="text" name="x.unit|单位|0~20" :value="unit" placeholder="请输入单位">
					</view>
				</view>
				<view class="fixAuto bb ">
					<view class="w100">
						开始时间
					</view>
					<view class="father">
						<view class="flex " :class="startTime?'':'rt'">
							<view :class="startTime?'black':'gray'">
								{{startTime?startTime:'请选择'}}
								<input type="text" name="x.startTime|请选择核查开始时间" :value="startTime?startTime+':00':''" style="display: none;">
							</view>
							<view class="sIcon-arrowRight fz14 grey pl10"></view>
						</view>
						<view class="abs op0">
							<datetime-picker fields="minute" @change="startTime = $event.fmt3 ">
								<view >核查开始时间</view>
							</datetime-picker>
						</view>
					</view>
				</view>
				
				<view class="fixAuto bb ">
					<view class="w100">
						结束时间
					</view>
					<view class="father">
						<view class="flex " :class="endTime?'':'rt'">
							<view :class="endTime?'black':'gray'">
								{{endTime?endTime:'请选择'}}
								<input type="text" name="x.endTime|请选择核查结束时间" :value="endTime?endTime+':00':''" style="display: none;">
							</view>
							<view class="sIcon-arrowRight fz14 grey pl10"></view>
						</view>
						<view class="abs op0">
							<datetime-picker fields="minute" @change="endTime = $event.fmt3 ">
								<view >核查结束时间</view>
							</datetime-picker>
						</view>
					</view>
				</view>
				
				<view class="fixAuto bb middle">
					<view class="w100">
						标液浓度
					</view>
					<view>
						<input type="text" name="x.sampleSolution|标液浓度|0~50" placeholder="请输入标液浓度">
					</view>
				</view>
				<view class="fixAuto bb middle">
					<view class="w100">
						仪器示值
					</view>
					<view>
						<input type="number" name="x.instrumentValue|仪器示值|amount" placeholder="请输入仪器示值">
					</view>
				</view>
				<view class="fixAuto bb middle">
					<view class="w100">
						误差
					</view>
					<view>
						<input type="number" name="x.error|误差|amount" v-model="error" placeholder="请输入误差">
					</view>
				</view>
				<view class="father">
					<view class="fixAuto bb">
						<view class="w100">
							核查结果
						</view>
						<view class="item ">
							<view class="flex ">
								<view :class="isNormal == 0 ? 'red' : 'green'">{{isNormalList[isNormal]}}</view>
								<view class="sIcon-arrowRight pl10 gray"></view>
								<input type="number" name="x.isNormal|核查结果" :value="isNormal" style="display: none;"/>
							</view>
						</view>
					</view>
					<picker mode="selector" class="abs op0" :range="isNormalList" @change="isNormal=$event.detail.value">
						<view>请选择</view>
					</picker>
				</view>
			</block>
			
			<view class="pd5 grayBg" v-if="curIndex==2"></view>
			<block v-if="curIndex!=0">
				<view class="pd10 main bb ">
					仪器校准
				</view>
				
				<view class="father">
					<view class="fixAuto bb middle ">
						<view class="w100">
							仪器名称
						</view>
						<view class="text-right">
							{{quipmentList[quipmentIndex]}}
							<text class="ml5 sIcon-arrowRight grey"></text>
						</view>
					</view>
					<picker class="op0 abs" mode="selector" :range="quipmentList" :value="quipmentIndex" @change="changeQuipment">
						<view class="op0 abs">{{quipment}}</view>
					</picker>
				</view>
				<view class="fixAuto bb middle" v-show="isOtherQuipment">
					<view class="w100">
						其他仪器名称
					</view>
					<view>
						<input type="text" name="x.instrumentName|仪器名称|0~100" v-model="quipment" placeholder="请输入仪器名称">
					</view>
				</view>
				
				<view class="fixAuto bb ">
					<view class="w100">
						开始时间
					</view>
					<view class="father">
						<view class="flex " :class="instrumentStartTime?'':'rt'">
							<view :class="instrumentStartTime?'black':'gray'">
								{{instrumentStartTime?instrumentStartTime:'请选择'}}
								<input type="text" name="x.instrumentStartTime|请选择仪器校准开始时间" :value="instrumentStartTime?instrumentStartTime+':00':''" style="display: none;">
							</view>
							<view class="sIcon-arrowRight fz14 grey pl10"></view>
						</view>
						<view class="abs op0">
							<datetime-picker fields="minute" @change="instrumentStartTime = $event.fmt3 ">
								<view >仪器校准开始时间</view>
							</datetime-picker>
						</view>
					</view>
				</view>
				
				<view class="fixAuto bb ">
					<view class="w100">
						结束时间
					</view>
					<view class="father">
						<view class="flex " :class="instrumentEndTime?'':'rt'">
							<view :class="instrumentEndTime?'black':'gray'">
								{{instrumentEndTime?instrumentEndTime:'请选择'}}
								<input type="text" name="x.instrumentEndTime|请选择仪器校准结束时间" :value="instrumentEndTime?instrumentEndTime+':00':''" style="display: none;">
							</view>
							<view class="sIcon-arrowRight fz14 grey pl10"></view>
						</view>
						<view class="abs op0">
							<datetime-picker fields="minute" @change="instrumentEndTime = $event.fmt3 ">
								<view >仪器校准结束时间</view>
							</datetime-picker>
						</view>
					</view>
				</view>
				
				<!-- <view class="fixAuto bb middle">
					<view class="w100">
						校准参数
					</view>
					<view>
						<input type="text" name="x.paramType|校准参数|0~20" placeholder="请输入校准参数">
					</view>
				</view> -->
				
				<view class="father">
					<view class="fixAuto bb">
						<view class="w100">
							校准参数
						</view>
						<view class="item ">
							<view class="flex ">
								<view>{{typeList[paramType]}}</view>
								<view class="sIcon-arrowRight pl10 gray"></view>
								<input type="number" name="x.paramType|校准参数" :value="typeList[paramType]" style="display: none;"/>
							</view>
						</view>
					</view>
					<picker mode="selector" class="abs op0" :range="typeList" @change="paramType=$event.detail.value">
						<view>请选择</view>
					</picker>
				</view>
				
				<view class="fixAuto bb middle">
					<view class="w100">
						校准结果
					</view>
					<view>
						<input type="text" name="x.result|校准结果|0~200" v-model="instrumentError" placeholder="请输入校准结果">
					</view>
				</view>
				<view class="father">
					<view class="fixAuto bb">
						<view class="w100">
							校准是否合格
						</view>
						<view class="item ">
							<view class="flex ">
								<view :class="instrumentIsNormal == 0 ? 'red' : 'green'">{{isNormalList[instrumentIsNormal]}}</view>
								<view class="sIcon-arrowRight pl10 gray"></view>
								<input type="number" name="x.instrumentIsNormal|仪器校准结果" :value="instrumentIsNormal" style="display: none;"/>
							</view>
						</view>
					</view>
					<picker mode="selector" class="abs op0" :range="isNormalList" @change="instrumentIsNormal=$event.detail.value">
						<view>请选择</view>
					</picker>
				</view>
			</block>
			
			
			<view class="plr100 pd30">
				<button form-type="submit" class="btn gradualBg shadow block rds23">
					保存记录
				</button>
			</view>
		</form>

	</layout>
</template>

<script>
	export default {
		data() {
			return {
				param:{id:""} ,
				startTime:"",
				endTime : "" ,
				instrumentStartTime:"",
				instrumentEndTime:"",
				isNormal:1,
				instrumentIsNormal:1,
				isNormalList:["不合格","合格"],
				typeList:["K/B值","吸光度"],
				paramType:0,
				curIndex:0 ,
				mixNum : 60,
				error : '' ,
				instrumentError:"",
				factorList:["COD","PH","氨氮","总磷","总氮","流量","其他"],
				unitList:["mg/L","m³/h","mg/L","mg/L","mg/L","m³/h",""],
				factorIndex:0,
				factor:"COD",
				unit:"mg/L",
				quipmentList:["COD分析仪","PH分析仪","氨氮分析仪","总磷分析仪","总氮分析仪","流量计","其他"],
				quipmentIndex : 0 ,
				quipment : "COD分析仪"
			}
		},
		computed:{
			isOtherFator : function(e){
				return this.factorList[this.factorIndex] == '其他' ;
			},
			isOtherQuipment : function(e){
				return this.quipmentList[this.quipmentIndex] == '其他' ;
			}
		},
		onLoad(params) {
			this.param = params ;
		},
		
		watch:{
			error:function(e){
				// var value = Number(this.error);
				// this.isNormal = value <= this.mixNum ? 1 : 0 ;
			},
			instrumentError:function(e){
				// var value = Number(this.instrumentError);
				// this.instrumentIsNormal = value <= this.mixNum ? 1 : 0 ;
			},
		},
		
		methods: {
			
			changeQuipment:function(e){
				this.quipmentIndex = e.detail.value ;
				var quipment = this.quipmentList[this.quipmentIndex] ;
				this.quipment = quipment == '其他' ? '' : quipment ;
			},
			
			changeFactor:function(e){
				this.factorIndex = e.detail.value ;
				var factor = this.factorList[this.factorIndex] ;
				this.factor = factor == '其他' ? '' : factor ;
				this.unit = this.unitList[this.factorIndex];
			},
			submit:function(e){
				this.form.submit(e , this.success);
			},
			
			success:function(e){
				this.kit.goSuccessBack("保存成功");
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>